<template>
  <!-- 直播 -->
  <view>
    <view class="top-bg" style="background: url('/static/image/live_bg2.png') no-repeat">
      <view class="tab-list">
        <view class="tab-item" @click="handleClickBtn(0)">
          <view class="tab-txt"> 热门视频 </view>
          <image src="/static/image/white_line.png" class="white-line" v-if="activeIndex == 0"></image>
        </view>
        <view class="tab-item" @click="handleClickBtn(1)">
          <view class="tab-txt"> 推广视频 </view>
          <image src="/static/image/white_line.png"  class="white-line" v-if="activeIndex == 1"></image>
        </view>
      </view>
      <view class="search-box">
        <u-search shape="round" :showAction="false"></u-search>
      </view>
      <view class="tab-list second-list" v-if="activeIndex == 0">
        <view class="tab-item">
          <view class="tab-txt active"> 全部 </view>
          <image src="/static/image/red_line.png" class="white-line"></image>
        </view>
        <view class="tab-item">
          直播中
          <view class="icon"></view>
        </view>
        <view class="tab-item">
          预约中
          <view class="icon"></view>
        </view>
        <view class="tab-item">
          达人
          <view class="icon"></view>
        </view>
        <view class="tab-item">
          品牌
          <view class="icon"></view>
        </view>
      </view>
      <view class="tab-list second-list" v-if="activeIndex == 1">
        <view class="tab-item">
          <view class="tab-txt active"> 全部 </view>
          <image src="/static/image/red_line.png" class="white-line"></image>
        </view>
        <view class="tab-item">
          精选视频
          <!-- <image src="/static/image/red_line.png" class="white-line"></image> -->
        </view>
        <view class="tab-item">
          热门视频
          <!-- <image src="/static/image/red_line.png" class="white-line"></image> -->
        </view>
      </view>
    </view>
    <view class="live-list" v-if="activeIndex == 0">
      <view class="live-item">
        <view class="live-left">
          <view class="live-avatar">
            <image
              src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
              class="avatar-img"
            ></image>
          </view>
          <view class="live-tag">直播中...</view>
        </view>
        <view class="live-right">
          <view class="live-time">10月26号 10:00开播</view>
          <view class="store-title">三只熊叔旗舰店</view>
          <view class="cashback-bg">
            <view class="cashback-txt">最高返现</view>
            <view class="cashback-txt red-txt">10%</view>
          </view>
          <view class="live-sub-title">松鼠空降 | 零食大降价 狂喜不断</view>
          <view class="promotion-bg">
            <view class="avatar-list">
              <view class="avatar-item first-item">
                <image
                  src="https://img.chinaticket.com/admin/2020/01/10/44c4c5680a21f720.png"
                ></image>
              </view>
              <view class="avatar-item second-item">
                <image
                  src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                ></image>
              </view>
              <view class="avatar-item">
                <image
                  src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                ></image>
              </view>
            </view>
            <view class="promotion-txt">999+人已推广</view>
          </view>
        </view>
      </view>
      <view class="live-item">
        <view class="live-left">
          <view class="live-avatar">
            <image
              src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
              class="avatar-img"
            ></image>
          </view>
          <view class="live-tag">直播中...</view>
        </view>
        <view class="live-right">
          <view class="live-time">10月26号 10:00开播</view>
          <view class="store-title">三只熊叔旗舰店</view>
          <view class="cashback-bg">
            <view class="cashback-txt">最高返现</view>
            <view class="cashback-txt red-txt">10%</view>
          </view>
          <view class="live-sub-title">松鼠空降 | 零食大降价 狂喜不断</view>
          <view class="promotion-bg">
            <view class="avatar-list">
              <view class="avatar-item first-item">
                <image
                  src="https://img.chinaticket.com/admin/2020/01/10/44c4c5680a21f720.png"
                ></image>
              </view>
              <view class="avatar-item second-item">
                <image
                  src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                ></image>
              </view>
              <view class="avatar-item">
                <image
                  src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                ></image>
              </view>
            </view>
            <view class="promotion-txt">999+人已推广</view>
          </view>
        </view>
      </view>
      <view class="live-item">
        <view class="live-left">
          <view class="live-avatar">
            <image
              src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
              class="avatar-img"
            ></image>
          </view>
          <view class="live-tag">直播中...</view>
        </view>
        <view class="live-right">
          <view class="live-time">10月26号 10:00开播</view>
          <view class="store-title">三只熊叔旗舰店</view>
          <view class="cashback-bg">
            <view class="cashback-txt">最高返现</view>
            <view class="cashback-txt red-txt">10%</view>
          </view>
          <view class="live-sub-title">松鼠空降 | 零食大降价 狂喜不断</view>
          <view class="promotion-bg">
            <view class="avatar-list">
              <view class="avatar-item first-item">
                <image
                  src="https://img.chinaticket.com/admin/2020/01/10/44c4c5680a21f720.png"
                ></image>
              </view>
              <view class="avatar-item second-item">
                <image
                  src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                ></image>
              </view>
              <view class="avatar-item">
                <image
                  src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                ></image>
              </view>
            </view>
            <view class="promotion-txt">999+人已推广</view>
          </view>
        </view>
      </view>
    </view>
    <view class="live-container" v-if="activeIndex == 1">
      <view class="column left-column">
        <view class="item">
          <image src="/static/image/swiper_bg.png" class="swiper-bg"></image>
          <view class="swiper-txt">MAS氨基酸界面泡沫MAS氨基酸界面泡沫</view>
          <view class="sale-price">¥108.00</view>
          <view class="share-bg">
            <view class="share-txt">分享每单赚</view>
            <view class="share-price">¥58.00</view>
          </view>
        </view>
      </view>
      <view class="column right-column">
        <view class="item">
          <image src="/static/image/swiper_bg.png" class="swiper-bg"></image>
          <view class="swiper-txt">MAS氨基酸界面泡沫MAS氨基酸界面泡沫</view>
          <view class="sale-price">¥108.00</view>
          <view class="share-bg">
            <view class="share-txt">分享每单赚</view>
            <view class="share-price">¥58.00</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "live",
  data() {
    return {
      activeIndex: 0,
    };
  },
  methods: {
    handleClickBtn(val) {
      this.activeIndex = val;
    }
  }
};
</script>

<style scope lang="scss">
.tab-list {
  display: flex;
  justify-content: start;
}

.tab-item {
  flex: 1;
  text-align: center;
  height: 86rpx;
  line-height: 86rpx;
}

.live-item {
  height: 272rpx;
  // width: 676rpx;
  background: #fff;
  border-radius: 16rpx;
  margin: 20rpx auto;
  display: flex;
  justify-content: space-between;
}

.live-left {
  width: 180rpx;
  /* background: #ccc; */
  position: relative;
}

.live-avatar {
  margin-top: 30px;
  margin-left: 26rpx;
  border: 2rpx solid #ffe7e1;
  border-radius: 100%;
}

.live-tag {
  width: 98rpx;
  height: 29rpx;
  background: #fa705b;
  border-radius: 20rpx;
  font-size: 20rpx;
  color: #fff;
  position: absolute;
  left: 50%;
  bottom: 25%;
  margin-left: -40rpx;
  text-align: center;
}

.avatar-img {
  width: 132rpx;
  height: 132rpx;
}

.live-right {
  width: 479rpx;
  position: relative;
}

.live-time {
  position: absolute;
  right: 0;
  top: 0;
  width: 220rpx;
  height: 48rpx;
  background: #f5894e;
  border-top-right-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
  font-size: 24rpx;
  color: #fff;
  text-align: center;
  line-height: 48rpx;
}

.store-title {
  font-size: 32rpx;
  text-align: left;
  margin-top: 36rpx;
  font-weight: 600;
}

.cashback-bg {
  background: url("/static/image/img18.png");
  background-size: 132rpx 36rpx;
  width: 132rpx;
  height: 36rpx;
  line-height: 36rpx;
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}

.cashback-txt {
  font-size: 16rpx;
  color: #fff;
  font-weight: 600;
}

.red-txt {
  color: #d40000;
}

.live-sub-title {
  color: #999999;
  font-size: 24rpx;
  margin: 10rpx auto;
}

.promotion-bg {
  background: url("/static/image/promotion_bg.png");
  background-size: 470rpx 60rpx;
  width: 470rpx;
  height: 60rpx;
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 20rpx;
}

.avatar-list {
  position: relative;
  margin-left: 10rpx;
}

.avatar-item {
  display: flex;
  display: inline-block;
  width: 38rpx;
  border: 2rpx solid #fff;
  border-radius: 100%;
}

.avatar-item image {
  width: 38rpx;
  height: 38rpx;
}

.first-item {
  position: relative;
  left: 25rpx;
}

.second-item {
  position: relative;
  left: 15rpx;
}

.promotion-txt {
  font-size: 28rpx;
  color: #b58c83;
}

.top-bg {
  // background: url("/static/image/live_bg2.png");
  background-size: 750rpx 300rpx;
  width: 750rpx;
  height: 300rpx;
}

.search-box {
  padding: 30rpx;
}

.second-list {
  display: flex;
  justify-content: start;
  background: url("/static/image/pink_bg.png");
  background-size: 750rpx 104rpx;
  width: 750rpx;
  height: 104rpx;
}

.second-list .tab-txt {
  font-size: 28rpx;
  color: #333;
}

.second-list .active {
  font-weight: 700;
}

.tab-item {
  margin-top: 30rpx;
  width: 180rpx;
  text-align: center;
  height: 60rpx;
  line-height: 30rpx;
}

.tab-txt {
  color: #fff;
  font-size: 32rpx;
}

.white-line {
  width: 30rpx;
  height: 12rpx;
}

.live-list {
  margin: 0 20rpx;
}

.live-container {
  display: flex;
  flex-direction: row;
  gap: 10rpx;
}
.live-container .column {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* gap: 15px; */
}
.live-container .item {
  height: 680rpx;
  background: #fff;
  border-radius: 20rpx;
}
.live-container .swiper-bg {
  width: 100%;
}
.live-container .left-column {
  margin-left: 10rpx;
}

.live-container .right-column {
  margin-right: 10rpx;
}
.live-container .swiper-txt {
  height: 70rpx;
  line-height: 70rpx;
  font-weight: 600;
  margin: 0 20rpx;
  font-size: 30rpx;
  width: 265rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.live-container .sale-price {
  font-size: 40rpx;
  color: #D40000;
  font-weight: 600;
  text-indent: 20rpx;
}
.live-container .share-txt {
  color: #d40000;
  font-size: 20rpx;
  font-weight: 600;
  margin-left: 34rpx;
}

.live-container .share-price {
  font-size: 20rpx;
  color: #fff;
}

.live-container .share-bg {
  background: url("/static/image/img19.png");
  background-size: 262rpx 38rpx;
  width: 262rpx;
  height: 38rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 20rpx;
}
</style>